<template>
  <!--员工信息 start-->
  <section class="head">
    <div class="head-left">
      <x-img :src="photo" class="ximg-demo" error-class="ximg-error"></x-img>
    </div>
    <div class="head-right">
      <p>{{userName}}({{staffID}})</p>
      <p>{{address}}({{job}})</p>
    </div>
  </section>
  <!--员工信息 end-->
</template>
<script>
export default {
  data () {
    // store 获取数据赋值
    let {userName, photo, staffID, job, address, holiday, wait} = this.$store.state.userInfo
    // const userInfo = this.$store.state.userInfo
    return {
      userName, // 员工姓名
      photo, // 员工头像
      staffID, // 工号
      job, // 职位
      address, // 店铺地址
      holiday, // 剩余假期
      wait, // 我的待办
      isAgree: false
    }
  }
}
</script>
<style lang="less" scoped>
  .head {
    background: @white;
    margin-top: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex;
    border-top: 1px solid @border_eee;
    border-bottom: 1px solid @border_eee;
    .head-left {
      display: flex;
      justify-content: center;
      width: 10rem;
      img {
        width: 6rem;
        height: 6rem;
        border-radius: 50%;
      }
    }
    .head-right {
      flex: 1;
      text-align: left;
      font-size: @fsbig;
      color: @black;
      margin: auto;
    }
  }
</style>
